<template>
<div class="nav-bar-item" @mouseover="showSecond" @mouseout="showSecond">
  <a href="javascript:void(0)"><div class="item" @click="clickItem"><slot></slot></div></a>
  <div class="second-item" v-show="isShowSecond">
    <ul>
      <li v-for="(item, index) in secondItem" :key="index"><a href="javascript:void(0)"><div>{{item}}</div></a></li>
    </ul>
  </div>
</div>
</template>

<script>
export default{
  name: 'NavBarItem',
  props: {
    secondItem: {
      type: Array,
      default() {
        return []
      }
    },
    path: String
  },
  data () {
    return {
      isShowSecond: false
    }
  },
  methods: {
    showSecond() {
      this.isShowSecond = !this.isShowSecond
    },
    clickItem() {
      if (this.$route.path != this.path) {
        this.$router.replace(this.path)
      }
    }
  }

}
</script>

<style scoped>
.nav-bar-item{
  text-align: center;
  width: 95px;
  height: 50px;
  line-height: 50px;
  float: left;
}
.nav-bar-item:hover{
  background-color: rgba(77, 77, 77, .8);
}
.second-item{
  position: relative;
  font-size: 12px;
  z-index: 999;
  background-color: rgba(77, 77, 77, .8);
}
.second-item li{
  height: 30px;
  line-height: 30px;
}
.second-item li:hover{
  background-color: rgba(83, 173, 58, .7);
}
.nav-bar-item a{
    color: #fff;
}
</style>
